<template>
  <div class="search-debugger" v-if="visible">
    <div class="debugger-header">
      <h3>搜索调试器</h3>
      <button class="close-btn" @click="$emit('close')">×</button>
    </div>
    
    <div class="debugger-content">
      <div class="section">
        <h4>请求信息</h4>
        <div class="curl-command">
          <pre>{{ curlCommand }}</pre>
          <button class="copy-btn" @click="copyToClipboard(curlCommand)">复制</button>
        </div>
        
        <div class="request-url">
          <strong>Request URL</strong>
          <div class="url-box">{{ requestUrl }}</div>
        </div>
      </div>
      
      <div class="section">
        <h4>服务器响应</h4>
        <div class="response-info">
          <div class="response-code">
            <strong>Code</strong>
            <span :class="{ 'success': responseCode === 200 }">{{ responseCode }}</span>
          </div>
          <div class="response-details">
            <strong>Details</strong>
            <span>{{ responseDetails }}</span>
          </div>
        </div>
      </div>
      
      <div class="section">
        <h4>响应内容</h4>
        <div class="response-body">
          <pre>{{ formattedResponseBody }}</pre>
          <button class="copy-btn" @click="copyToClipboard(formattedResponseBody)">复制</button>
        </div>
      </div>
      
      <div class="section">
        <h4>响应头</h4>
        <div class="response-headers">
          <pre>{{ formattedResponseHeaders }}</pre>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  requestUrl: {
    type: String,
    default: ''
  },
  requestHeaders: {
    type: Object,
    default: () => ({})
  },
  responseData: {
    type: Object,
    default: () => ({})
  },
  responseCode: {
    type: Number,
    default: 0
  },
  responseHeaders: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['close'])

// 生成cURL命令
const curlCommand = computed(() => {
  if (!props.requestUrl) return ''
  
  let cmd = `curl -X 'GET' \\\n  '${props.requestUrl}' \\`
  
  // 添加请求头
  Object.entries(props.requestHeaders || {}).forEach(([key, value]) => {
    cmd += `\n  -H '${key}: ${value}' \\`
  })
  
  return cmd
})

// 格式化响应体
const formattedResponseBody = computed(() => {
  try {
    if (!props.responseData) return ''
    return JSON.stringify(props.responseData, null, 2)
  } catch (e) {
    return '无法解析响应数据'
  }
})

// 格式化响应头
const formattedResponseHeaders = computed(() => {
  try {
    const headers = props.responseHeaders || {}
    let result = ''
    
    Object.entries(headers).forEach(([key, value]) => {
      result += `${key}: ${value}\n`
    })
    
    return result
  } catch (e) {
    return '无法解析响应头'
  }
})

// 响应详情
const responseDetails = computed(() => {
  if (props.responseCode === 200) return 'OK'
  if (props.responseCode === 404) return 'Not Found'
  if (props.responseCode === 400) return 'Bad Request'
  if (props.responseCode === 500) return 'Internal Server Error'
  return ''
})

// 复制到剪贴板
const copyToClipboard = (text) => {
  navigator.clipboard.writeText(text)
    .then(() => {
      ElMessage.success('已复制到剪贴板')
    })
    .catch(() => {
      ElMessage.error('复制失败')
    })
}
</script>

<style scoped>
.search-debugger {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.debugger-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
}

.debugger-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: #909399;
  cursor: pointer;
}

.debugger-content {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.section {
  margin-bottom: 20px;
}

.section h4 {
  margin: 0 0 10px;
  font-size: 14px;
  color: #606266;
  font-weight: 600;
}

.curl-command, .response-body, .response-headers {
  position: relative;
  background-color: #282c34;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 15px;
  overflow-x: auto;
}

.curl-command pre, .response-body pre, .response-headers pre {
  margin: 0;
  color: #abb2bf;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
}

.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 4px;
  color: #abb2bf;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}

.copy-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.request-url {
  margin-top: 15px;
}

.url-box {
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 8px 12px;
  margin-top: 5px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  word-break: break-all;
}

.response-info {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.response-code, .response-details {
  display: flex;
  flex-direction: column;
}

.success {
  color: #67c23a;
}

@media (max-width: 768px) {
  .search-debugger {
    width: 95%;
    max-height: 90vh;
  }
  
  .response-info {
    flex-direction: column;
    gap: 10px;
  }
}
</style> 